<template>
	<view class="set-password-body">
		<u-form :model="form" ref="uForm" :error-type="errorType">
			<u-form-item  prop="oldpassword">
				<u-input placeholder="请输入旧密码"  password-icon type="password"  v-model="form.oldpassword" />
			</u-form-item>
			<u-form-item   prop="newpassword">
				<u-input placeholder="请输入新密码"  password-icon type="password"  v-model="form.newpassword" />
			</u-form-item>
			<u-form-item  prop="repassword">
				<u-input placeholder="重写输入新密码"  password-icon type="password" v-model="form.repassword" />
			</u-form-item>
			<button type="default" @tap="submit" :disabled="disabled" :loading="loading" class="button">提交</button>
		</u-form>
	</view>
	
</template>
<script>
export default {
	data() {
		return {
			loading:false,
			disabled:true,
			errorType: ['message', 'border-bottom'],
			
			form: {
				oldpassword: '',
				newpassword: '',
				repassword: ''
			},
			//表单验证
			rules:{
				oldpassword:[{
					required: true, 
					message: '密码不能为空', 
					// 可以单个或者同时写两个触发验证方式 
					trigger: ['blur'],
				},
				{
					min: 5, 
					message: '密码不能少于5位',
					// 可以单个或者同时写两个触发验证方式 
					trigger: ['blur'],
				}
				],
				newpassword:[{
					required: true,
					message: '密码不能为空', 
					// 可以单个或者同时写两个触发验证方式 
					trigger: ['blur'],
				}],
				repassword:[
					{
						trigger: ['blur'],
						message: '两次密码不一致',
						// 可以单个或者同时写两个触发验证方式 
						validator:(rule, value, callbac)=>{
						
							if(this.form.newpassword==value){
							console.log("成功")
								return true
								
								
							}else{
								console.log("失败")
								return false
							}
						}
						
					}
				]
				
			}
			
		};
	},
	// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		watch:{
		'form.oldpassword'(){
			this.showdisabled()
		},
		'form.newpassword'(){
			this.showdisabled()
		},
		'form.repassword'(){
			this.showdisabled()
		}
		},
		methods:{
			//是否禁用提交按钮
			showdisabled(){
				if(this.form.oldpassword!=''&&this.form.newpassword!=''&&this.form.repassword!=''){
					if(this.form.newpassword==this.form.repassword){
						this.disabled=false
						return
					}
					this.disabled=true
				}
				this.disabled=true
			},
		submit() {
				this.$refs.uForm.validate(valid => {
					this.loading=true
					if (valid) {
						console.log('验证通过');
						setTimeout(()=> {
							this.loading=false
						}, 1000);
					} else {
						console.log('验证失败');
						setTimeout(()=> {
							this.loading=false
						}, 1000);
					}
					
					});
				}
		}
};
</script>

<style>
	.set-password-body{
		margin: 10upx 20upx;
	}
	.button{
		background-color: #FFE933;
		margin: 20upx 40upx;
		
	}
</style>
